<template>
  <div class="product-progress box-bg">
    <TitleLable label="项目推进进度"> </TitleLable>
    <div class="head">
      <el-row type="flex">
        <div class="first">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >
            全选
          </el-checkbox>
        </div>
        <div class="head-checkbox">
          <el-checkbox-group
            v-model="checked"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="item in cities" :label="item" :key="item">
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-row>
      <el-row type="flex" class="nav">
        <div class="first"></div>
        <el-row
          type="flex"
          justify="space-between"
          align="bottom"
          class="flex-trwice"
        >
          <div class="item text-gradient" v-for="item in cities" :key="item">
            {{ item }}
          </div>
        </el-row>
      </el-row>
    </div>
    <!-- 内容 -->
    <div class="body">
      <el-row type="flex" v-for="(item, index) in list" :key="index">
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          class="first pointer"
          @click.native="goTo"
        >
          {{ item.label }}
        </el-row>
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          class="flex-trwice"
        >
          <el-row
            type="flex"
            justify="center"
            align="middle"
            class="h40 item"
            v-for="(v, vIndex) in 6"
            :key="vIndex"
          >
            <el-checkbox :value="item.num > vIndex"></el-checkbox>
          </el-row>
        </el-row>
      </el-row>
    </div>
  </div>
</template>

<script>
import TitleLable from "../TitleLable/index.vue";
const progressOptions = ["入池", "立项", "尽调", "决策", "审批", "交割"];
export default {
  name: "ProductProgress",
  components: { TitleLable },
  data() {
    return {
      checkAll: true,
      checked: progressOptions,
      cities: progressOptions,
      isIndeterminate: true,
      list: [
        { label: "永贵博得", num: 3 },
        { label: "创格科技", num: 3 },
        { label: "八维通", num: 1 },
        { label: "鸣啸科技", num: 3 },
        { label: "双杰新能源", num: 2 },
        { label: "共富基金", num: 4 },
        { label: "JH公司并购", num: 2 },
        { label: "天一建设并购", num: 3 },
        { label: "我是项目名", num: 1 },
        { label: "我是项目名", num: 1 },
      ],
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checked = val ? progressOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      let citiLen = this.cities.length;
      this.checkAll = checkedCount === citiLen;
      this.isIndeterminate = checkedCount > 0 && checkedCount < citiLen;
    },
    goTo() {
      this.$message("进入平台：投资阶段/按阶段推进");
    },
  },
};
</script>

<style lang="scss" scoped>
.product-progress {
  height: 588px;
  .first {
    width: 90px;
  }
  .item {
    width: 30px;
  }

  .head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 130px;
    padding: 30px 20px 0;
    .head-checkbox {
      margin-left: 6px;
    }
    .nav {
      height: 40px;
      font-weight: bold;
      line-height: 16px;
      .item {
        padding-bottom: 6px;
      }
    }
  }
  .body {
    > div {
      height: 40px;
      padding: 0 20px;
      &:nth-child(odd) {
        background: #19335c;
      }
    }
  }

  ::v-deep .head .el-checkbox {
    margin-right: 40px;
    &:nth-child(3n) {
      margin-right: 0;
      margin-bottom: 13px;
    }
  }
}
</style>
